<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Mybatis文件搜索</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="codemirror/codemirror.css">
    <link rel="stylesheet" href="codemirror/addon/dialog/dialog.css">
    <link rel="stylesheet" href="codemirror/addon/search/matchesonscrollbar.css">
    <link rel="stylesheet" href="codemirror/addon/hint/show-hint.css">
    <link rel="stylesheet" href="codemirror/theme/ambiance.css">
    <style>
        .CodeMirror {
            border: 1px solid #eee;
            height: 500px;
        }
        .layui-table-cell{
            font-size: xx-small;
        }

    </style>

</head>
<body class="layui-layout-body layui-form" lay-filter="allform">
<div class="layui-form-item">
    <!--<label class="layui-form-label">单行输入框</label>-->
    <div class="layui-row" lay-filter="searchBar">
        <div class="layui-col-md4">
            <input type="text" name="searchString" lay-verify="title" autocomplete="off" placeholder="请输入搜索内容" class="layui-input" id="searchStr_input">
        </div>

        <div class="layui-col-md4 layui-btn-group">
            <button class="layui-btn" id="submit_btn" lay-filter="*" lay-submit><i class="layui-icon layui-icon-search"></i></button>
            <!--<button class="layui-btn"id="help_btn"><i class="layui-icon layui-icon-help"></i></button>-->
            <input type="checkbox" name="tags[entities]" title="entities" lay-skin="primary" >
            <input type="checkbox" name="tags[kingbase]" title="kingbase" lay-skin="primary" >
            <input type="checkbox" name="tags[mysql]" title="mysql" lay-skin="primary" >

        </div>


    </div>

</div>



<div class="layui-row">
    <div class="layui-col-xs6">
        <table id="file_list"  lay-filter="file_list">
            <thead>
            <tr>
                <th lay-data="{field:'fileName', width:250, sort: true}">文件名</th>
                <th lay-data="{field:'tag', width:50, sort: true}">TAG</th>
                <th lay-data="{field:'filePath', sort: true}">路径</th>

            </tr>
            </thead>
        </table>
    </div>
    <div class="layui-col-xs6">
        <div id="file_title"></div>
        <div id="file_code" >

        </div>
    </div>
</div>
<script src="layui/layui.all.js"></script>
<script src="codemirror/codemirror.js"></script>
<script src="codemirror/mode/xml/xml.js"></script>
<script src="codemirror/addon/fold/xml-fold.js"></script>
<script src="codemirror/addon/hint/show-hint.js"></script>
<script src="codemirror/addon/hint/xml-hint.js"></script>
<script src="codemirror/addon/edit/matchtags.js"></script>
<script src="codemirror/addon/dialog/dialog.js"></script>
<script src="codemirror/addon/search/searchcursor.js"></script>
<script src="codemirror/addon/search/search.js"></script>
<script src="codemirror/mode/clike/clike.js"></script>
<script src="codemirror/addon/edit/matchbrackets.js"></script>
<script src="codemirror/addon/scroll/annotatescrollbar.js"></script>
<script src="codemirror/addon/search/matchesonscrollbar.js"></script>
<script src="codemirror/addon/search/jump-to-line.js"></script>
<script src="codemirror/keymap/vim.js"></script>
<script>
    var editor;
    layui.use(['element','form'], function(){
        var element = layui.element;
        var form = layui.form;
        var $ = layui.$;
        var table = layui.table;
        table.init('file_list');
        table.on('row(file_list)', function(obj){
            var $data = obj.data;

            $.ajax({
                type: "GET",
                url: "/api/loadfile",
                data: {filename:$data.fileName, filepath:$data.filePath},
                dataType: "text",
                success: function(code){
                    editor.setValue(code);
                    var $fileTitle = $("#file_title");
                    $fileTitle.attr("fileName",$data.fileName);
                    $fileTitle.attr("filePath",$data.filePath);
                    $fileTitle.text($data.filePath+"\\"+$data.fileName);
                },
                fail:function(data){
                    console.log(data);
                }
            });
        });
        form.on('submit(*)', function(data){
            //console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            //console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            var url = ["/api/searchByString?"];
            url.push("searchString="+data.field["searchString"].trim().toLowerCase())
            if(data.field["tags[entities]"]=="on"){
                url.push("&tags=entities");
            }
            if(data.field["tags[kingbase]"]=="on"){
                url.push("&tags=kingbase");
            }
            if(data.field["tags[mysql]"]=="on"){
                url.push("&tags=mysql");
            }
            console.log(url.join(""))
            table.render({
                elem: '#file_list'
                ,height: 500
                ,url: url.join("") //数据接口
                ,page: true
                ,limit:1000//开启分页
                ,cols: [[ //表头
                    {field: 'fileName', title: '文件名', width:250,sort: true, fixed: 'left'}
                    ,{field: 'tag', title: 'TAG', width:50,sort: true, fixed: 'left'}
                    ,{field: 'filePath', title: '路径', sort: true, fixed: 'left'}
                ]]
                ,toolbar: true
                ,defaultToolbar:['exports']
            });

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        form.val("allform", {
            "tags[entities]": true
            ,"tags[kingbase]": true
        })


        CodeMirror.commands.save = function(cm){
            var $fileTitle = $("#file_title");
            $.ajax({
                type: "POST",
                url: "/api/savefile",
                data: {filename:$fileTitle.attr("fileName"), filepath:$fileTitle.attr("filePath"),content:cm.getValue()},
                dataType: "json",
                success: function(){
                    alert("OK");
                }
            });

        };
        var tags={

        }

        function completeAfter(cm, pred) {
            var cur = cm.getCursor();
            if (!pred || pred()) setTimeout(function() {
                if (!cm.state.completionActive)
                    cm.showHint({completeSingle: false});
            }, 100);
            return CodeMirror.Pass;
        }

        function completeIfAfterLt(cm) {
            return completeAfter(cm, function() {
                var cur = cm.getCursor();
                return cm.getRange(CodeMirror.Pos(cur.line, cur.ch - 1), cur) == "<";
            });
        }

        function completeIfInTag(cm) {
            return completeAfter(cm, function() {
                var tok = cm.getTokenAt(cm.getCursor());
                if (tok.type == "string" && (!/['"]/.test(tok.string.charAt(tok.string.length - 1)) || tok.string.length == 1)) return false;
                var inner = CodeMirror.innerMode(cm.getMode(), tok.state).state;
                return inner.tagName;
            });
        }

        editor = CodeMirror(document.getElementById("file_code"), {
            lineNumbers: true
            , mode: "xml"
            , theme:"ambiance"
            , keyMap: "vim"
            , matchBrackets: true
            , showCursorWhenSelecting: true
            , inputStyle: "contenteditable"
            , lineWrapping: true
            , extraKeys: {
                "Ctrl-F": "findPersistent",
                "'<'": completeAfter,
                "'/'": completeIfAfterLt,
                "' '": completeIfInTag,
                "'='": completeIfInTag,
                "Ctrl-Space": "autocomplete"
            }
            , matchTags: {bothTags: true}
            , hintOptions: {schemaInfo: tags}
            //, tabSize:4
            //, keyMap:""
            //, scrollbarStyle:""
        });
    });

    document.onkeydown = function(event){
        if(event.key==="Enter"){
            var target = layui.$(event.target);
            if(target.attr("name")==="searchString"){
                layui.$("#submit_btn").click();
            }
        }
    }


</script>

</body>
</html>
